import React from 'react'
import { changeNav,getServiceinfo,getArea,
    getProvince,modifyServicer,getCity,getRegion ,storePush}  from '../../actions'
import { connect } from 'react-redux'
import { createForm } from 'rc-form'
import { List,InputItem ,WhiteSpace,Button,Picker,Toast} from 'antd-mobile'
import { ajaxGet ,ajaxPut} from '../../common/jsajaxservice.js'
import styles from './../tenant.less'
import hhistory from '../../history'

import CSSModules from 'react-css-modules'


const Item = List.Item;
@CSSModules(styles, { allowMultiple: false })
class StorePush extends React.Component {
    constructor( props ){
        super( props )
        this.state = {
            province:[],
            provinceName:'',
            city:[],
            cityName:"",
            region:[],
            regionName:"",
			area:{code:'',name:''}
        }
    }
	componentDidMount(){
	    this.props.tochangeNav({title:"开通新门店"})
        this.props.getProvince();
        let groupdetail = JSON.parse(sessionStorage.getItem('stortdetail'))
        if(groupdetail){
            this.props.getCity(groupdetail.province);
            this.props.getRegion(groupdetail.city);
            this.setState({
                groupdetail:groupdetail,
                province:[groupdetail.province],
                city:[groupdetail.city],
                region:[groupdetail.region],
                area:{code:groupdetail.area,name:groupdetail.areaName}
            })

        }
	}
    componentWillUnmount(){
        sessionStorage.removeItem('stortdetail')
    }
    modifyStore(){
        this.props.form.validateFields(( error,value )=>{
            if( error ){
                Toast.info('请填写必填项')
                return
            }
            let data = { storeName:value.storeName,status:this.state.groupdetail.status
                ,groupCode:value.groupCode,servicerCode:value.servicerCode,fullname:value.fullname
                , mobile:value.mobile,email:value.email,province:this.state.province[0],
                city:this.state.city[0],region:this.state.region[0],manageAcreage:value.manageAcreage
                ,address:value.address,remark:value.remark
                ,area:this.state.area.code}
            ajaxPut('/bd/store/'+this.state.groupdetail.storeCode,data).then( res =>{
                if(res.code == 0){
                    Toast.success('修改'+res.msg,2,()=>{
                        hhistory.goBack()
                    })
                }else{
                    Toast.fail(res.msg,2)
                }
			})
        })
	}
	openStore(){
            this.props.form.validateFields(( error,value )=>{
                if( error ){
                    Toast.info('请填写必填项')
                    return
                }
                this.props.storePush({ storeName:value.storeName
                    ,groupCode:value.groupCode,servicerCode:value.servicerCode,fullname:value.fullname
                    , mobile:value.mobile,email:value.email,province:this.state.province[0],
                    city:this.state.city[0],region:this.state.region[0],manageAcreage:value.manageAcreage
                    ,address:value.address,remark:value.remark
                    ,area:this.state.area.code,})
            })
	}
	render(){
        const { locationInfo,getCity,getRegion } = this.props
        const { getFieldProps } = this.props.form
        const groupdetail = this.state.groupdetail||{}
		return(
			<div>
				<div>
					<List >
						<InputItem
							styleName="am-list"
                            {...getFieldProps('storeName',{ rules: [{required: true}], initialValue:groupdetail.storeName})}
							clear
							placeholder="请填写门店名称"
							autoFocus
						>门店名称  <RedSpan /></InputItem>
						<InputItem
							styleName="am-list"
                            {...getFieldProps('groupCode',{ rules: [{required: true}] ,initialValue:groupdetail.groupCode})}
							clear
							placeholder="请填写"
							autoFocus
						>所属集团  <RedSpan /></InputItem>
						<InputItem
							styleName="am-list"
                            {...getFieldProps('servicerCode' ,{ rules: [{required: true}],initialValue:groupdetail.servicerCode})}
							clear
							placeholder="请填写"
							autoFocus
						>所属品牌  <RedSpan /></InputItem>


				<WhiteSpace style={{background:'#f5f5f9'}} />

						<InputItem
							styleName="am-list"
                            {...getFieldProps('fullname',{ rules: [{required: true}] ,initialValue:groupdetail.fullname})}
							clear
							placeholder="必填"
							autoFocus
						>联系人  <RedSpan /></InputItem>
						<InputItem
							styleName="am-list"
                            {...getFieldProps('mobile',{ rules: [{required: true}],initialValue:groupdetail.mobile})}
							clear
							placeholder="必填"
							autoFocus
						>手机号码  <RedSpan /></InputItem>
						<InputItem
							styleName="am-list"
                            {...getFieldProps('email',{initialValue:groupdetail.email})}
							clear
							placeholder="必填"
							autoFocus
						>邮箱</InputItem>

				<WhiteSpace style={{background:'#f5f5f9'}} />

						<Picker

							data={[
                                locationInfo.province
                            ]}
							title="选择省份"
							cascade={false}
							value = {locationInfo.province.length !== 0?this.state.province:[]}
							onChange={
                                v => {
                                    getCity( v[0] );
                                    console.log(v);
                                    ajaxGet( "dic/area/"+ v[0] ).then( res=> {console.log(res) ;this.setState({area:res.data})} );
                                    this.setState( { city:[] ,province:v} )
                                }
                            }
						>
							<Item arrow="down" styleName="am-picker">
								所属省份
							</Item>
						</Picker>

						<Picker
							data={[
                                locationInfo.city
                            ]}
							title="选择城市"
							cascade={false}
							value = {locationInfo.city.length !== 0?this.state.city:[]}
							onChange={
                                v => {
                                    // this.testy.next()
                                    this.setState( { city:v,region:[]} )
									console.log(getRegion)
                                    getRegion( v[0] )
                                }
                            }
						>
							<Item styleName="am-picker" arrow="down" onClick={ () => {
                                //this.props.getCity( this.props.servicerInfo.province )
                            } }>
								所属城市
							</Item>
						</Picker>

						<Picker

							data={[
                                locationInfo.region
                            ]}
							title="选择行政区"
							cascade={false}
							value = {locationInfo.region.length !== 0?this.state.region:[]}
							onChange={
                                v => {
                                    this.setState( { region:v} );
                                }
                            }
						>
							<Item styleName="am-picker" arrow="down" onClick={ () => {
                                // this.props.getRegion( this.props.servicerInfo.city )
                            } }>
								所属行政区
							</Item>
						</Picker>


				<WhiteSpace style={{background:'#f5f5f9'}} />
				<div style={{background:'#f5f5f9',paddingLeft:'0.3rem',fontSize:'0.28rem'}}>所属地区：{this.state.area.name}</div>
						<WhiteSpace style={{background:'#f5f5f9'}} />

						<InputItem
							styleName="am-list"
                            {...getFieldProps('address',{ rules: [{required: true}],initialValue:groupdetail.address })}
							clear
							placeholder="必填"
							autoFocus
						>街道地址  <RedSpan /></InputItem>
						<InputItem
							styleName="am-list"
                            {...getFieldProps('manageAcreage',{initialValue:groupdetail.manageAcreage})}
							clear
							placeholder="必填"
							autoFocus
						>经营面积</InputItem>
						<InputItem
							styleName="am-list"
                            {...getFieldProps('remark',{initialValue:groupdetail.remark})}
							clear
							placeholder="必填"
							autoFocus
						>备注</InputItem>
					</List>
				</div>
				<WhiteSpace style={{background:'#f5f5f9'}} />
				<Button key="1" type="primary"  onClick={
                    groupdetail?this.modifyStore.bind(this):this.openStore.bind(this)
                     }>{groupdetail?'修改':'开通'}</Button>
			</div>

		)
	}

}
class RedSpan extends React.Component {
	render(){
		return (<span style={{color:'#ff4c4c'}}>*</span>)
	}
}
const mapStateToProps = ( state ) => ({
    servicerInfo:state.servicerInfo,
    locationInfo:state.locationInfo,

})

const mapDispatchToProps = (dispatch) => ({
	tochangeNav:navobj => dispatch( changeNav( navobj ) ),
    tenantPush: json => dispatch(tenantPush(json)),
    getServiceinfo:code => dispatch( getServiceinfo( code ) ),
    getArea:() => dispatch( getArea() ),
    modifyServicer:( code,data ) => dispatch( modifyServicer( code,data ) ),
    getProvince:() => dispatch( getProvince() ),
    getCity:code => dispatch( getCity(code) ),
    getRegion:code => dispatch( getRegion(code) ),
    storePush: json => dispatch(storePush(json))

})

export default createForm()(connect( mapStateToProps,mapDispatchToProps )( StorePush ))